<template>
    <input type="text" :id="id">
</template>
<script>
    export default {
        name: 'Slider',
        props: ['value', 'id', 'min', 'max'],
        mounted () {
            $('#' + this.id).kendoSlider({
                smallStep: 1,
                largeStep: 1,
                min: this.min || 1,
                max: this.max || 12,
                value: this.value,
                change: e => {
                    this.$emit('input', e.value)
                }
            })
        }
    }
</script>